<template>
  <div class="am-content">
    <div class="detail-info-box">
      <ul class="detail-info">
        <li><span>姓名: </span> <span>{{ TIAlarmRecordDetail.callName }}</span></li>
        <li><span>身份证号: </span> <span>{{ TIAlarmRecordDetail.idCard }}</span></li>
        <li><span>定位: </span> <span>{{ TIAlarmRecordDetail.location }}</span></li>
        <li><span>详情描述:</span> <span>{{ TIAlarmRecordDetail.context }}</span></li>
        <li>
          <span>相关图片:</span>
          <template v-for="(item, index) in imagePaths">
            <img style="display:inline-block; width: 100px; height: 100px; margin: 0px 6px; cursor: pointer; vertical-align: text-top" v-bind:key="index" :src="item" alt="" v-on:click="handleImagePreview">
          </template>
        </li>
        <li class="layout-row-center">
          <span>语音:</span>
          <template v-for="(item, index) in TIAlarmRecordDetail.voices">
            <video v-bind:key="index" width="300px" height="50px" v-bind:src="item | fileFilter" controls="controls"></video>
          </template>
        </li>
        <li class="layout-row">
          <span>视频:</span>
          <template v-for="(item, index) in TIAlarmRecordDetail.videos">
            <video v-bind:key="index" width="500px" height="500px" v-bind:src="item | fileFilter" controls="controls"></video>
          </template>
        </li>
      </ul>
      <ul class="detail-info">
        <li><span>性别: </span> <span>{{ TIAlarmRecordDetail.sex }}</span></li>
        <li><span>手机号码: </span> <span>{{ TIAlarmRecordDetail.phone }}</span></li>
        <li><span>报警时间: </span> <span>{{ TIAlarmRecordDetail.time }}</span></li>
      </ul>
    </div>
    <image-viewer v-if="showViewer" :url-list="imagePaths" :on-close="closeViewer"/>
  </div>
</template>

<script>
import CommonFilters from "@/mixins/CommonFilters";
import ImageViewer from "element-ui/packages/image/src/image-viewer";
import HttpConnection from "@/util/HttpConnection";
import {uploadImage} from "@/config/env";
export default {
  name: "TIAlarmRecordDetail",
  components: { ImageViewer },
  mixins: [CommonFilters],
  data() {
    return {
      TIAlarmRecordDetail: {},
      showViewer: false,
      imagePaths: []
    };
  },
  mounted() {
    let that = this;
    HttpConnection.get("/api-bureau/portal/mediaalarm/detail", {
      params: {
        id: that.$route.query.id
      }
    }).then(function(response) {
      that.TIAlarmRecordDetail = response.data;
      let _imagePaths = [];
      for (let item of response.data.images) {
        _imagePaths.push(uploadImage + item);
      }
      that.imagePaths = _imagePaths;
    });
  },
  methods: {
    handleImagePreview() {
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.am-content {
  padding: 20px;
  background-color: #ffffff;
}

ul {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
}

.detail-info-box {
  display: flex;
  flex-direction: row;
  border: 1px solid #e8e8e8;
  padding: 20px 0px;
  margin: 0px 0px 40px 0px;
}

.detail-info {
  li {
    margin: 10px 0px 10px 0px;
    color: #333333;

    span:nth-of-type(1) {
      display: inline-block;
      width: 100px;
      text-align: right;
      margin: 0px 6px 0px 0px;
    }
  }
}
.layout-row {
  display: flex;
  flex-direction: row;
}

.layout-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
